<template>
  <div class="dialogSave">
    <el-dialog title="保存" :visible.sync="dialogVisible" @close="close" :close-on-click-modal="false">
      <el-form label-width="100px" :model="formData" :rules="rules" ref="formData">
        <el-form-item label="页面名称">
          <el-input v-model="pageName" @change="change"></el-input>
        </el-form-item>
        <el-form-item label="存储的模版">
          <el-select class="width100" v-model="formData.path">
            <el-option v-for="(item, index) in pathList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeClick">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const pathList = [
  {label: '', value: ''},
  {label: '', value: ''},
  {label: '', value: ''}
]
import {mapState} from 'vuex'
export default {
  name: 'dialogSave',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pathList,
      dialogVisible: false,
      formData: {
        pageName: '',
        path: ''
      },
      rules: {
        pageName: [
          
        ],
        path: [
          
        ]
      }
    }
  },
  computed: {
    ...mapState('pageData', ['pageName'])
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose() {},
    closeClick() {
      this.$emit('update:visible', false)
    },
    confirmClick() {
      this.$emit('update:visible', false)
      this.SAVEPAGE(this.formData)
    },
    close() {
      this.$emit('update:visible', false)
    },
    change(val) {
      
    }
  }
}
</script>